<template>
	<scroll-view class="container" scroll-y @scroll="handleScroll">
		<view class="grid">
			<view 
				v-for="(item, index) in items" 
				:key="index" 
				:id="'media-' + index" 
				:class="['media-item', { 'full-width': index < 3 }]"
			>
				<!-- 默认显示图片 -->
				<image v-if="!item.isPlaying" :src="item.img" class="media" mode="aspectFill"></image>
				<!-- 进入中间区域后播放视频 -->
				<!-- #ifdef H5 -->
				<view v-else :id="'video-' + index" style="width: 100%;height: 100%;border-radius: 20rpx;"></view>
				<!-- #endif  -->
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	// #ifdef H5
	import Hls from "hls.js"
	import Dplayer from "dplayer"
	// #endif

	export default {
		data() {
			return {
				items: [
					{ img: "https://image.maimn.com/cover/dc9c5e72115e56504b3ece307a461181.jpg", video: "https://hn.bfvvs.com/play/QdJ0K8Ka/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/28beb742d3db60ae6dd9d49cf9cd0997.jpg", video: "https://hn.bfvvs.com/play/mbkADgXe/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/04514b9893dd1719269aea025015ebe9.jpg", video: "https://hn.bfvvs.com/play/vbmDGG9a/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/dc9c5e72115e56504b3ece307a461181.jpg", video: "https://hn.bfvvs.com/play/QdJ0K8Ka/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/28beb742d3db60ae6dd9d49cf9cd0997.jpg", video: "https://hn.bfvvs.com/play/mbkADgXe/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/04514b9893dd1719269aea025015ebe9.jpg", video: "https://hn.bfvvs.com/play/vbmDGG9a/index.m3u8", isPlaying: false },{ img: "https://image.maimn.com/cover/dc9c5e72115e56504b3ece307a461181.jpg", video: "https://hn.bfvvs.com/play/QdJ0K8Ka/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/28beb742d3db60ae6dd9d49cf9cd0997.jpg", video: "https://hn.bfvvs.com/play/mbkADgXe/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/04514b9893dd1719269aea025015ebe9.jpg", video: "https://hn.bfvvs.com/play/vbmDGG9a/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/dc9c5e72115e56504b3ece307a461181.jpg", video: "https://hn.bfvvs.com/play/QdJ0K8Ka/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/28beb742d3db60ae6dd9d49cf9cd0997.jpg", video: "https://hn.bfvvs.com/play/mbkADgXe/index.m3u8", isPlaying: false },
					{ img: "https://image.maimn.com/cover/04514b9893dd1719269aea025015ebe9.jpg", video: "https://hn.bfvvs.com/play/vbmDGG9a/index.m3u8", isPlaying: false },
				],
				videoPlayers: {},
			};
		},
		methods: {
			// 监听滚动，判断哪个元素在中间
			handleScroll() {
				const query = uni.createSelectorQuery().in(this);
				const windowHeight = uni.getSystemInfoSync().windowHeight;

				this.items.forEach((item, index) => {
					const id = `media-${index}`;
					query.select(`#${id}`).boundingClientRect((rect) => {
						if (rect) {
							const centerY = rect.top + rect.height / 2;
							const isCenter = centerY > windowHeight * 0.4 && centerY < windowHeight * 0.6;

							if (isCenter && !item.isPlaying) {
								this.$set(this.items, index, { ...item, isPlaying: true });
								this.$nextTick(() => {
									this.videos('video-'+index, item);
								});
							} else if (!isCenter && item.isPlaying) {
								this.$set(this.items, index, { ...item, isPlaying: false });
								if (this.videoPlayers[`video-${index}`]) {
									this.videoPlayers[`video-${index}`].destroy();
									delete this.videoPlayers[`video-${index}`];
								}
							}
						}
					}).exec();
				});
			},
			// 初始化播放器
			videos(idSelector, item) {
				const container = document.getElementById(idSelector);
				if (container) {
					let dp = new Dplayer({
						container: container,
						autoplay: true, // 是否自动播放
						theme: "#000", // 主题色
						loop: false, // 视频是否循环播放
						lang: "zh-cn",
						airplay: true,
						screenshot: false, // 是否开启截图
						hotkey: false, // 是否开启热键
						preload: "metadata", // 视频是否预加载
						volume: 0, // 默认音量
						mutex: true, // 阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
						controls: false, // 不显示控件
						video: {
							url: item.video,
							pic: item.img,
							type: 'customHls',
							customType: {
								customHls: function(video, player) {
									const hls = new Hls({
										maxBufferLength: 60,
										maxBufferSize: 300 * 1024 * 1024,
										maxBufferHole: 0.5,
										nudgeMaxRetry: 3,
										startFragPrefetch: true,
									});
									hls.loadSource(video.src);
									hls.attachMedia(video);
								},
							},
							
						}
					});
					dp.play();
					this.videoPlayers[idSelector] = dp;
				}
			},
		},
	};
</script>

<style scoped>
/* 页面滚动容器 */
.container {
	/* width: 100vw; */
	height: 100vh;
	overflow-y: auto;
	display: flex;
	justify-content: center;
}

/* 网格布局 */
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 默认2列 */
	gap: 10px;
	padding: 20rpx;
	/* width: 100%; */
}

/* 默认的媒体项样式 */
.media-item {
	width: 100%;
	height: 200rpx;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 图片和视频 */
.media {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
	object-fit: cover;
}

/* 前三项独占一行 */
.full-width {
	height: 300rpx;
	grid-column: span 2; /* 跨 2 列 */
}
</style>
